.btn-icon {
	$this: &;

	position: relative;
	background-color: transparent;
	color: $icon-color;
	margin: 0 $icon-btn-margin-x;
	cursor: pointer;

	&::before {
		content: "";
		position: absolute;

		top: -$icon-btn-margin-x;
		right: -$icon-btn-margin-x;
		bottom: -$icon-btn-margin-x;
		left: -$icon-btn-margin-x;

		background-color: $color-hover;
		border-radius: 50%;
		transform: scale3d(0, 0, 1);
		transition: transform .15s ease-out;
		z-index: 0;
	}

	&:not(&--disabled) {
		&:hover,
		&#{$this}--focus-visible {
			@if $icon-btn-hover-bg-color {
				color: $icon-btn-hover-color;
			}

			&::before {
				transform: scale3d(1, 1, 1);
			}
		}
	}

	&:focus {
		outline: none;
	}

	&--primary {
		color: $color-primary;
	}

	&--disabled {
		cursor: auto;
		opacity: $icon-btn-disabled-opacity;
	}

	&--small {
		margin: 0 $icon-btn-small-margin-x;

		&::before {
			top: -$icon-btn-small-margin-x;
			right: -$icon-btn-small-margin-x;
			bottom: -$icon-btn-small-margin-x;
			left: -$icon-btn-small-margin-x;
		}
	}

	&--medium {
		margin: 0 $icon-btn-medium-margin-x;

		&::before {
			top: -$icon-btn-medium-margin-x;
			right: -$icon-btn-medium-margin-x;
			bottom: -$icon-btn-medium-margin-x;
			left: -$icon-btn-medium-margin-x;
		}
	}

	&--large {
		margin: 0 $icon-btn-large-margin-x;

		&::before {
			top: -$icon-btn-large-margin-x;
			right: -$icon-btn-large-margin-x;
			bottom: -$icon-btn-large-margin-x;
			left: -$icon-btn-large-margin-x;
		}
	}
}
